<!--
 *                   ___====-_  _-====___
 *             _--^^^#####//      \\#####^^^--_
 *          _-^##########// (    ) \\##########^-_
 *         -############//  |\^^/|  \\############-
 *       _/############//   (@::@)   \############\_
 *      /#############((     \\//     ))#############\
 *     -###############\\    (oo)    //###############-
 *    -#################\\  / VV \  //#################-
 *   -###################\\/      \//###################-
 *  _#/|##########/\######(   /\   )######/\##########|\#_
 *  |/ |#/\#/\#/\/  \#/\##\  |  |  /##/\#/  \/\#/\#/\#| \|
 *  `  |/  V  V  `   V  \#\| |  | |/#/  V   '  V  V  \|  '
 *     `   `  `      `   / | |  | | \   '      '  '   '
 *                      (  | |  | |  )
 *                     __\ | |  | | /__
 *                    (vvv(VVV)(VVV)vvv)
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *                神兽保佑            永无BUG
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-04 15:16:32
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-16 10:19:31
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <div class="popup">
    <div class="popup-header">
      <i class="el-icon-close" @click="$emit('close')"></i>
      <slot name="title">{{ title }}</slot>
    </div>
    <div ref="content" class="popup-content">
      <slot />
    </div>
    <div class="popup-footer">
      <slot name="footer" />
      <el-button v-if="showCancel" @click="$emit('close')">
        {{ cancelText }}
      </el-button>
      <el-button
        v-if="showSubmit"
        type="primary"
        @click="$emit('submit', $event)"
      >
        {{ submitText }}
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
    showSubmit: {
      type: Boolean,
      default: true,
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    submitText: {
      type: String,
      default: '提交',
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.content.scrollTo({
        top: 0,
        left: 0,
      })
    })
  },
}
</script>
<style lang="scss" scoped>
.popup {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-size: 14px;
  .popup-header {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #f6f7f9;
    font-weight: bold;
    color: #303133;
    font-size: 16px;
    i {
      margin-right: 8px;
      font-size: 24px;
      vertical-align: -3px;
      cursor: pointer;
      color: #909399;
    }
  }
  .popup-content {
    flex: 1;
    padding: 24px;
    overflow: auto;
    color: rgba(0, 0, 0, 0.85);
    position: relative;
  }
  .popup-footer {
    border-top: 1px solid #f0f0f0;
    text-align: right;
    padding: 16px 20px;
  }
}
</style>
